<template>
	<view class="">
		<map id="map1" :latitude="latitude" :longitude="longitude" :markers="markers" show-location @updated="lodingmap">
		</map>
		<view class="tobus">
			<image @click="loding" class="dw" src="../../static/images/suodingweizhi.png" mode=""></image>
			<view class="tobus_box">
				<text class="tobus_box_title">{{city}}</text>
				<view class="txt_list">
					<text>{{address}}</text>
					
				</view>
				<button type="default" @click="tobus">到这去</button>
			</view>
		</view>
	</view>

</template>

<script>

	export default {
		data() {
			return {
				// 这个经纬度是自己的
				latitude: 0,
				longitude: 0,
				markers: [{
					id: 1,
					width: 50,
					heigth: 50,
					iconPath: '../../static/images/weizhi.png',
					// 这个经纬度是店铺的位置
					latitude: 0,
					longitude: 0,
				}],
				num:1,
				// 标记点地址名字
				city:'',
				flag:false,
				address:''
			}
		},
		onReady() {
			this.mapCxt = wx.createMapContext("map1")
		},
		onLoad(option) {
			console.log(option);
			// 这是标记点坐标
			this.markers[0].latitude = parseFloat(option.lat);
			this.markers[0].longitude = parseFloat(option.log);
		
			
			//把标记左边转换成地址 （逆解析）
			uni.request({
				url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+this.markers[0].latitude+','+this.markers[0].longitude+'&key=MG4BZ-67YLJ-OYMFL-KCRZ3-DP3X7-EUF5O&get_poi=1',
				success:res=>{
					console.log(res.data);
					this.city = res.data.result.formatted_addresses.recommend,
					this.address=res.data.result.address
				}
				
			})
			// this.getaddzuobiao();
			// 进入到地图页面 获取自己的坐标
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.mapCxt.includePoints({
						padding: [140, 50, 140, 50],
						// 第一个是我位置的数据
						points: [{
								latitude: this.latitude,
								longitude: this.longitude,
								
							},
							{
								latitude: this.markers[0].latitude,
								longitude: this.markers[0].longitude

							}
						]
						
					})
				}
			});
			

		},
		methods:{
			
			// 当地图加载完成后出发
			lodingmap(){
				this.flag=true
			},
			loding(){
				
			if(this.flag){
				this.mapCxt.moveToLocation()
			}
					

			},
			tobus(){
				if(this.flag){
					let plugin = requirePlugin('routePlan');
					let key = 'G35BZ-NIGL2-O4SUV-CKXML-ZVXFJ-L3FIQ';  //使用在腾讯位置服务申请的key
					let referer = '医院的导航地图组件';   //调用插件的app的名称
					let endPoint = JSON.stringify({  //终点
					  'name':this.city,
					  'latitude': this.markers[0].latitude,
					  'longitude': this.markers[0].longitude
					});
					wx.navigateTo({
					  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint+'&navigation='+this.num
					});
				}
				
			}
		}


	}
</script>

<style>
	map {
		width: 100%;
		height: calc(100vh - 226rpx);
	}

	.tobus {
		height: 266rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx 30rpx 30rpx;
		background-color: #fff;
		margin: 0 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 10rpx 10rpx 0 0;
	}

	.tobus_box_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.txt_list {
		display: flex;
		margin: 30rpx 0;
	}

	.txt_list text {
		font-size: 24rpx;
		color: #333;
		margin-right: 14rpx;
	}

	.tobus .tobus_box button {
		height: 84rpx;
		background: #1588ED;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.dw {
		transform: translateY(-100%);
		top: -30rpx;
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
		bottom: 420rpx;
	}
</style>
